<template>
  <div>
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item v-bind="formItemLayout" label="充值金额(元)">
        <a-input-number
          style="width: 100%"
          step="10000"
          :min="0"
          @change="changeMoney"
          :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
          v-decorator="[
            'money',
            {
              rules: [{ required: true, message: '请输入申请金额' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="手续费"
        extra="手续费=充值金额*5‰, 最低手续费：1元"
      >
        <a-input
          disabled
          v-decorator="[
            'charge',
            {
              rules: [{ required: true, message: '请输入手续费' }]
            }
          ]"
        >
          <span slot="suffix">元</span>
        </a-input>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="实际充值金额(元)">
        <a-input-number
          @change="changeMoneyActual"
          style="width: 100%"
          :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
          v-decorator="[
            'actual',
            {
              rules: [{ required: true, message: '到账金额' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="付款银行">
        <a-select
          v-decorator="[
            'bank_code',
            { rules: [{ required: true, message: '请选择银行' }] }
          ]"
        >
          <a-select-option
            v-for="(item, index) in filterBankList"
            :key="index"
            :value="item.withdrawCode"
          >
            <span style="display: inline-block;width: 30px;">
              <img
                width="20px"
                :src="item.img"
                alt=""
                style="vertical-align: middle"
              />
            </span>
            {{ item.name }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item style="text-align: center">
        <a-button
          class="submit-btn"
          type="primary"
          html-type="submit"
          size="large"
        >
          下一步
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { InputNumber } from "ant-design-vue";
import bankList from "@/lib/bank";
import "@/assets/fonticon/iconfont.css";
export default {
  components: {
    aInputNumber: InputNumber
  },
  data() {
    return {
      bankList,
      timer: null,
      isShowTimer: false,
      count: 60,
      autoCompleteResult: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      cardList: [],
      headers: {
        token: this.$crypto.getAES(localStorage.getItem("ctoken"))
      },
      id: null,
      filterBankList: []
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  methods: {
    changeMoney(e) {
      if (e) {
        let money = e;
        let count = parseFloat((money * 0.005).toFixed(2));
        let actual = 0;
        if (count < 1) {
          count = 1;
          actual = money + 1;
        } else {
          actual = money + count;
        }
        this.form.setFieldsValue({ charge: count });
        this.form.setFieldsValue({ actual: actual });
      } else {
        this.form.setFieldsValue({ charge: "" });
        this.form.setFieldsValue({ actual: "" });
      }
    },
    changeMoneyActual(e) {
      if (e) {
        let actual = e;
        let money = actual / 1.005;
        let count = (money * 0.005).toFixed(2);
        if (count < 1) {
          count = 1;
          money = actual - 1;
        } else {
          money = actual - count;
        }
        this.form.setFieldsValue({ charge: count });
        this.form.setFieldsValue({ money: money });
      } else {
        this.form.setFieldsValue({ charge: "" });
        this.form.setFieldsValue({ money: "" });
      }
    },
    // 获取验证码
    getCode() {
      clearInterval(this.timer);
      this.count = 60;
      this.$ajax
        .post(this.$api.sendPayCode, {
          mobile: this.mobile
        })
        .then(res => {
          this.$message.success(res.msg);
          this.isShowTimer = true;
          this.timer = setInterval(() => {
            this.count--;
            if (this.count === 0) {
              this.isShowTimer = false;
              clearInterval(this.timer);
              this.count = 60;
            }
          }, 1000);
        })
        .catch(err => {
          this.isShowTimer = false;
          this.$message.error(err);
        });
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          let obj = JSON.parse(JSON.stringify(values));
          delete obj.charge;
          delete obj.actual;
          this.$ajax
            .post(this.$api.recharge, obj)
            .then(res => {
              window.location.href = res.url;
              // this.$message.success("充值成功");
              // this.$router.push({ name: "recharge" });
            })
            .catch(err => {
              this.$message.error(err);
            });
        }
      });
    },
    formatBankList() {
      this.filterBankList = [];
      this.bankList.forEach(item => {
        if (item.isWithDraw) {
          this.filterBankList.push(item);
        }
      });
    }
  },
  computed: {
    mobile() {
      return this.$store.state.mobile;
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  created() {
    this.formatBankList();
  }
};
</script>

<style scoped lang="less">
.iconfont {
  font-size: 20px;
}
.ant-form {
  max-width: 650px;
  margin: 0 auto;
}
</style>
